<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0rem;
				padding: 0rem;
			}
			#containter{
				width: 100%;
				height: 600px;
				background-color: aquamarine;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#allimg{
				width: 600px;
				height: 100px;
				display: flex;
				align-items: center;
				overflow: hidden;
				border:red;
				border-style: double;
			}
			#imglist{
				width: 1600px;
				height: 100px;
				display: flex;
			}
			#imglist img{
				width: 100px;
				height: 100px;
				
			}
		</style>
	</head>
	<body>
		<div id="containter">
			<div id="allimg">
				<div id="imglist" onmouseenter="enter1()" onmouseleave="leave1()">
					<img src="img/1.jpeg" >
					<img src="img/2.jpeg" >
					<img src="img/3.jpeg" >
					<img src="img/4.jpeg" >
					<img src="img/5.jpeg" >
					<img src="img/6.jpeg" >
					<img src="img/7.jpeg" >
					<img src="img/8.jpeg" >
					<img src="img/9.jpeg" >
					<img src="img/10.jpeg" >
					<img src="img/1.jpeg" >
					<img src="img/2.jpeg" >
					<img src="img/3.jpeg" >
					<img src="img/4.jpeg" >
					<img src="img/5.jpeg" >
					<img src="img/6.jpeg" >
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		onload = function(){
			out();
		}
		var num=0;
		var myset = null;
		var mytime = null;
		var aa = true;
		var imgid = document.getElementById("imglist");
		function out(){

			
			myset = setInterval(
			function(){
				if(aa!=true){
				return;
			}
				imgid.style.marginLeft = num+'px';
				num--;
				if(num==-1000){
					num=0;
				}
				if(num%100==0){
				clearInterval(myset);
				mytime = setTimeout(function(){
					out();
				},1000)
			}
			}
			,10)	
		}
		
		function enter1(){
			aa = false;
			
		}
		function leave1(){
			aa = true;
			
		}
	</script>
</html>
